<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='基础数据')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript" th:src="@{/js/mall/advert.js?v=}+${new java.util.Date().getTime()}"></script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

<body>
<div th:replace="mall/components/goodsSelect"></div>
<div id="app" v-cloak>
  <el-container @keyup.enter.native="query">
	<el-header height="45px" class="inner_header">
	    	<el-form ref="form" :model="queryData" label-width="50px"  :label-position="labelPosition" >
		    	<el-row :gutter="20">
				  <el-col :span="5">
				  	<el-form-item label="类型:" label-width="60px">
				  		<el-select v-model="queryData.type" :size="size"  placeholder="请选择 " clearable>
						    <el-option
						      v-for="item in typeOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
				    </el-form-item>
				  </el-col>
				  <el-col :span="5">
				  	<el-form-item label="广告位:" label-width="80px">
				  		<el-select v-model="queryData.location" :size="size"  placeholder="请选择 " clearable>
						    <el-option
						      v-for="item in locationOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
				    </el-form-item>
				  </el-col>
				  <el-col :span="5">
				  		<el-form-item label="名称:">
					  		<el-input placeholder="请输入名称" v-model="queryData.name" :size="size" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="5">
				  	<el-form-item label-width="0">
				  		<el-button type="primary" :size="size" icon="el-icon-search" @click="search">查询</el-button>
				  		<el-button type="primary" :size="size" icon="el-icon-plus" @click="addItem">增加</el-button>
				  	</el-form-item>
				  </el-col>
				</el-row>
	    	</el-form>
	    </el-header>
	    <el-main class="inner_main">
	    	<div>
	    	  <el-table  
	    	    ref="advertDatagrid" 
	    	    :data="datagrid"
			    tooltip-effect="dark"
			    style="width: 100%;"
			    :height="tableHeight"
			    @row-click="datagridSelect"
			    v-loading="queryIng"
			    border
			    highlight-current-row
			    stripe
			    >
			    	<el-table-column type="index" label="序号" width="50"  align="center" header-align="center"></el-table-column>
				    <el-table-column prop="adImage" label="广告图片" width="100" align="center" header-align="center">
						<template slot-scope="scope"><img style="height: 80px" :src="scope.row.adImage"></template>
					</el-table-column>
				    <el-table-column prop="name" label="广告名称" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="status" label="上线/下线" width="100" align="center" header-align="center">
				    	<template slot-scope="scope"> {{formatStatus(scope.row.status)}}</template>
				    </el-table-column>
				    <el-table-column prop="type" label="类型" width="100" align="center" header-align="center"> 
				    	<template slot-scope="scope"> {{formatType(scope.row.type)}}</template>
				    </el-table-column>
				    <el-table-column prop="startTime" label="开始时间" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="stopTime" label="结束时间" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="shopName" label="店铺名" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="classifyName" label="分类名" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="goodsName" label="商品名" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="orderNum" label="排序号" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="location" label="广告位置" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="remark" label="备注内容" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="createDate" label="创建时间" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column  label="操作" fixed="right" width="160" align="center" header-align="center">
				    	<template slot-scope="scope">
					        <el-button type="primary" size="small"  @click="editItem(scope.row)">编辑</el-button>
					        <el-button type="danger" size="small"  @click="deleteItem(scope.row)">删除</el-button>
					      </template>
				    </el-table-column>
			  </el-table>
			</div>
			<div class="pagination_wrap">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      :layout="pagination_layout"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
			 </div>
	    </el-main>
	</el-container>
	<!-- dialog 开始 不需要【删除】 -->
	<el-dialog :visible.sync="dialogConfig.dialogFormVisible" :top="10" :close-on-click-modal="false" :show-close="false" fullscreen="true">
		  <el-form :model="addData" ref="dialogForm" :rules="rules">
		  	<el-form-item label="广告名称" prop="name" 
      		:label-width="dialogConfig.formLabelWidth">
			  	<el-input v-model="addData.name" :size="size"  auto-complete="off" style="width:220px;"></el-input>
		     </el-form-item>
		     <el-form-item label="广告位置" prop="location" 
      			:label-width="dialogConfig.formLabelWidth">
		     	<el-select v-model="addData.location" :size="size"  placeholder="请选择 " style="width:220px;">
				    <el-option
				      v-for="item in locationOptions"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
		     </el-form-item>
		     <el-form-item label="上线/下线：" prop="status" :label-width="dialogConfig.formLabelWidth">
		        <el-radio-group v-model="addData.status"  :size="size" >
		          <el-radio :label="'0'">下线</el-radio>
		          <el-radio :label="'1'">上线</el-radio>
		        </el-radio-group>
		     </el-form-item>
		  	 <el-form-item label="广告类型" prop="type" 
      		 :label-width="dialogConfig.formLabelWidth">
			  	  <el-select v-model="addData.type" :size="size"  placeholder="请选择 " style="width:220px;" @change="typeChange">
				    <el-option
				      v-for="item in typeOptions"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
				      >
				    </el-option>
				  </el-select>
		     </el-form-item>
		     <el-form-item label="店铺" prop="shopId"  v-if="addData.type==0"
      		  :label-width="dialogConfig.formLabelWidth">
			  	<el-select v-model="addData.shopId" :size="size" filterable   
			  	placeholder="请选择 " style="width:220px;" @change="handleShop">
				    <el-option
				      v-for="item in shopList"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id">
				    </el-option>
				  </el-select>
		     </el-form-item>
		  	<el-form-item label="商品分类" prop="classifyId"  v-if="addData.type==1"
      		:label-width="dialogConfig.formLabelWidth">
      				<el-cascader :options="cascaderOptions"  :size="size" v-model="addData.classifyId" :props="cascaderProps" @change="handleClassify" style="width:220px;"></el-cascader>
		     </el-form-item>
		  	<el-form-item label="广告商品" prop="goodsId"  v-if="addData.type==2"
      		:label-width="dialogConfig.formLabelWidth">
      			<div  style="width:220px;">
		     	<goods-select @selected="selectGoods" :value="addData.goodsName"></goods-select>
		     	</div>
		     </el-form-item>
	      	<el-form-item label="广告图片" prop="adImage" 
      		:label-width="dialogConfig.formLabelWidth">
		      	<el-upload
				  class="avatar-uploader"
				  accept="image/jpeg,image/gif,image/png,image/bmp"
				  :action="uploadUrl()"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess_adImage"
				  :before-upload="beforeAvatarUpload">
	
				  <img v-if="imageUrl_adImage" :src="imageUrl_adImage" class="avatar">
				  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
				  
				</el-upload>
			</el-form-item>
		  	<el-form-item label="开始时间" prop="startTime" 
      		:label-width="dialogConfig.formLabelWidth">
		     	<el-date-picker
			      v-model="addData.startTime"
			      type="datetime"
			      value-format="yyyy-MM-dd HH:mm:ss"
			      :size="size"
			      style="width:220px;"
			      placeholder="选择日期时间">
			    </el-date-picker>
		     </el-form-item>
		  	<el-form-item label="结束时间" prop="stopTime" 
      		:label-width="dialogConfig.formLabelWidth">
		    	<el-date-picker
			      v-model="addData.stopTime"
			      type="datetime"
			      value-format="yyyy-MM-dd HH:mm:ss"
			      :size="size"
			      style="width:220px;"
			      placeholder="选择日期时间">
		     </el-form-item>
		  	<el-form-item label="备注内容" prop="remark" 
      		:label-width="dialogConfig.formLabelWidth">
			  	<el-input v-model="addData.remark" type="textarea" :rows="5" :size="size"  auto-complete="off" style="width:220px;"></el-input>
		     </el-form-item>
		  	<el-form-item label="排序号" prop="orderNum" 
      		:label-width="dialogConfig.formLabelWidth">
      			<el-input-number v-model="addData.orderNum" :size="size"  auto-complete="off" style="width:220px;" :controls="false"></el-input-number>
		     </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer" style="text-align: center;">
		    <el-button @click="closeDialog" size="small">取 消</el-button>
		    <el-button type="primary" @click="submitForm('dialogForm')" size="small">确 定</el-button>
		  </div>
	 </el-dialog>
	 <!-- dialog 结束 -->
</div>
</body>
</html>